<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-01 18:30:20
 * 天凉好个秋
-->
<template>
    <a-popover
        :visible="showPopup"
        trigger="click"
        placement="bottom"
        :color="bgColor"
        @visibleChange="visibleChange"
    >
        <div class="search no-drag">
            <svgIcon name="search" size="20" fill="rgba(255, 255, 255, 0.8)"></svgIcon>
            <input
                type="text"
                v-model.trim="searchKey.showKeyword"
                :placeholder="placeholder.showKeyword"
                @keyup.enter="handleSearch"
                @input="inputChange"
            />
        </div>
        <template #content>
            <SearchPopover :searchkey="searchKey.realkeyword" @search="handleSearch" @close="showPopup = false" />
        </template>
    </a-popover>
</template>

<script lang='ts' setup>
import { ref, onBeforeUnmount, reactive, computed } from 'vue'
import { debounce } from 'lodash'
import { useRouter } from 'vue-router'
import { getDefaultSearchKey } from '@/service/api/search/search'
import { useSettingStore } from '@/store/setting'
import { useLocalStorage } from '@/hooks/localStorage/useLocalStorage'
import { bgColorEnum } from '@/types/design/popoverType'
import svgIcon from '../svgIcon/svgIcon.vue'
import SearchPopover from './searchPopover.vue'

const router = useRouter()
const settingStore = useSettingStore()
const { addHistorySearch } = useLocalStorage()

// 气泡背景颜色
const bgColor = computed(() => settingStore.isDark ? bgColorEnum.DARK : bgColorEnum.LIGHT)

// 搜索内容
const searchKey = reactive({
    realkeyword: '',
    showKeyword: '',
    type: 1
})
// 默认搜索
const placeholder = ref({
    realkeyword: '',
    showKeyword: '',
    type: 1
})
// 是否显示弹窗
const showPopup = ref(false)

const visibleChange = (show: boolean) => {
    console.log(show);
    
    showPopup.value = show
}

// 设置默认关键字
const setDefaultSearchKey = async () => {
    if (searchKey.realkeyword) return;
    const { data: { realkeyword, searchType, showKeyword } } = await getDefaultSearchKey()
    placeholder.value = {
        realkeyword,
        type: searchType,
        showKeyword
    }
}
setDefaultSearchKey()
// 定时更新默认关键字
const getDefaultIn = setInterval(() => setDefaultSearchKey(), 30000)

// 输入关键字
const inputChange = debounce(function (e) {
    searchKey.realkeyword = searchKey.showKeyword
    searchKey.type = 1
}, 300)

// 搜索事件
const handleSearch = (keyword: string | KeyboardEvent | undefined) => {
    let params = {
        keywords: placeholder.value.realkeyword,
        type: placeholder.value.type
    }
    // 存在主动输入的关键字
    if (searchKey.realkeyword !== '') {
        params.keywords = searchKey.realkeyword
        params.type = searchKey.type
    } else {
        searchKey.realkeyword =placeholder.value.realkeyword
        searchKey.showKeyword =  placeholder.value.showKeyword
        searchKey.type = placeholder.value.type
    }
    if(keyword !== undefined && typeof keyword === 'string') {
        searchKey.realkeyword = keyword
        searchKey.showKeyword = keyword
        searchKey.type = 1
        params.keywords = keyword
        params.type = 1
    }
    showPopup.value = false
    router.replace({ name: 'search', params })
    addHistorySearch(params.keywords)
}

// 清除定时器
onBeforeUnmount(() => clearInterval(getDefaultIn))
</script>

<style scoped lang='scss'>
.search {
    display: flex;
    align-items: center;
    width: 160px;
    height: 32px;
    margin: 0 10px;
    padding: 0 10px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.05);

    input {
        $font-size: 12px;
        width: 100%;
        padding: 0 10px;
        border: none;
        color: #fff;
        outline: none;
        font-size: $font-size;
        background-color: transparent;
        &::placeholder {
            color: rgba(255, 255, 255, 0.6);
            font-size: $font-size;
        }
    }
}
</style>